﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">
    
    .ui-pg-input {
        width: 50px;
        text-align: right;
    }
    
</style>

<h2>
    Index</h2>
<form class="form-horizontal" action="" method="">
<fieldset>
    <legend>Controls Bootstrap supports</legend>
    <div class="control-group">
        <label class="control-label" for="input01">
            Text input</label>
        <div class="controls">
            <input type="text" class="input-xlarge" id="input01">
            <p class="help-block">
                In addition to freeform text, any HTML5 text-based input appears like so.</p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="optionsCheckbox">
            Checkbox</label>
        <div class="controls">
            <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox" value="option1">
                Option one is this and that—be sure to include why it's great
            </label>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="select01">
            Select list</label>
        <div class="controls">
            <select id="select01">
                <option>something</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="multiSelect">
            Multicon-select</label>
        <div class="controls">
            <select multiple="multiple" id="multiSelect">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="fileInput">
            File input</label>
        <div class="controls">
            <input class="input-file" id="fileInput" type="file">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="textarea">
            Textarea</label>
        <div class="controls">
            <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
        </div>
    </div>
    <div class="control-group">
        <table id="list">
        </table>
        <div id="pager">
        </div>
    </div>
    <div class="form-actions">
        <button type="submit" class="btn btn-primary">
            Save changes</button>
        <button class="btn">
            Cancel</button>
    </div>
</fieldset>
</form>

<script type="text/javascript">

    $(document).ready(function () {
        initialGrid();
    });

    function initialGrid() {

        $("#list").jqGrid({
            url: '/Sample/GetUsers',
                datatype: 'json',
                mtype: 'POST',
                colNames: ['User Id', 'User Fullname', 'Created Date'],
                colModel: [
                    { name: 'ORIGINAL_CONSENT_FILE_NAME', index: 'ORIGINAL_CONSENT_FILE_NAME', width: 40, align: 'left', key: true },
                    { name: 'CREATED_DATE', index: 'CREATED_DATE', width: 40, align: 'left', key: false },
                    { name: 'CREATED_BY', index: 'CREATED_BY', width: 40, align: 'left', key: false }],
                pager: $('#pager'),
                rowNum: 10,
                width: 850,
                rownumbers: true,
                sortname: 'CREATED_DATE',
                sortorder: "desc",
                viewrecords: true,
                shrinkToFit: true,
                imgpath: '/Content/Themes/Redmond/Images',
                caption: 'รายการผู้ใช้ระบบ',
                autowidth: true
            }).navGrid('#pager',
                {
                    edit: false, add: false, del: false, search: false, refresh: true
                }
            );

    }

</script>